<template>
  <div class="bw-node-attr-icon-picker">
    <IconPicker v-bind="curProps" v-model:value="content" />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'

import { IconPicker } from '@bitwit/icon'
export default defineComponent({
  name: 'BwNodeAttrColorPicker',
  components: {
    IconPicker,
  },
  props: {
    value: {
      type: [String],
    },
    width: {
      type: [String],
      default: '100%',
    },
    pageSize: {
      type: [Number],
      default: 140,
    },
    copy: {
      type: Boolean,
      default: false,
    },
    mode: {
      type: [String] as PropType<'svg' | 'iconify'>,
      default: 'iconify',
    },
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const curProps = computed(() => {
      return {
        width: props.width,
        pageSize: props.pageSize,
        copy: props.copy,
        mode: props.mode,
      }
    })

    const content = computed({
      get: () => props.value,
      set: (value) => emit('update:value', value),
    })
    return {
      content,
      curProps,
    }
  },
})
</script>

<style lang="less" scoped>
.bw-node-attr-icon-picker {
  width: 100%;
  height: auto;
}
</style>
